<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/d3.v4.min.js"></script>
    <script src="js/jquery-1.9.1.js"></script>
</head>
<body>
    <div style="height:600px;width:100%; margin-top: 50px" id="view1"></div>

    <script>
        var cols = ["企业名称", "主营业务", "数据", "百分比（%）", "市值（亿元）", "营收（亿元）", "同比增长（%）", "净利润（亿元）", "同比增长（%）"];
        var cols = ["企业名称", "主营业务", "数据", "百分比（%）", "市值（亿元）", "营收（亿元）", "", "净利润（亿元）", ""];
        var data = [
            ["家居卖场", "红星美凯(H)", "2015/6/26", "01528.hk", "416.74", "109.6", "16.14", "40.78", "20.04"],
            ["功能沙发、床垫等", "敏华控股", "2011/4/9", "01999.hk", "236.08", "84.56", "28.89", "12.95", "-12.35"],
            ["家居建材等", "中国联塑", "2010/6/23", "02128.hk", "154.5", "203.6", "18.23", "22.93", "19.3"],
            ["地板、橱衣柜等", "大自然家居", "2011/5/26", "02083.hk", "24.08", "25.51", "10.15", "0.68", "78.11"],
            ["灯具、照明产品等", "雷士照明", "2010/5/20", "02222.hk", "23.64", "40.63", "6.75", "3.14", "108.22"],
            ["软体沙发等", "慕容控股", "2017/1/12", "01575.hk", "16.1", "12", "27.41", "1.6", "98.14"],
            ["实木家具、沙发、软床等", "皇朝家私", "2002/5/15", "01198.hk", "11.64", "8.49", "16.67", "0.47", "8.5"],
            ["慢回弹产品、床垫、记忆枕等", "盛诺集团", "2014/7/10", "01418.hk", "9.98", "35.29", "19.53", "0.34", "-61.68"],
            ["家居饰品、电壁炉等", "中创环球", "2013/12/20", "01678.hk", "4.01", "1.48", "-57.74", "-1.75", "-82.74"],
            ["家居装饰材料、家具等", "集一家居", "2015/11/6", "01495.hk", "3.75", "4.16", "8.65", "0.09", "-48.96"],
            ["陶瓷/卫浴产品等", "航标控股", "2012/7/13", "01190.hk", "1.09", "4.1", "13.83", "-4.21", "-17.93"]
        ];
        function range(min, max){
            var ary = [];
            if (max===undefined) {
                max = min;
                min = 0;
            }
            for (var i=min; i<max; i++) ary.push(i);
            return ary;
        }
        function cout(obj){ console.log(obj); }
        var id = "#view1";
        var width = $(id).width(), height = $(id).height();
        var PT = 50, PL = 50, count = data.length, rowH = (height - PT) / count, colIndex = 0;
        var W = width - PL; // 实际宽度
        var svg = d3.select(id).append('svg').attr('width', width).attr('height', height);
        var ws = ['0.10', '0.12', '0.30', '0.10', '0.10', '0.10', '0.10', '0.05', '0.05'];
        var colorLine = '#ccc';
        var line = d3.line();
        svg.append('path').attr('d', line([[PL, PT], [width, PT]]))
            .style('stroke-width', 1).style('stroke', colorLine);

        // 列标题
        svg.append('g').selectAll('text').data(cols).enter().append('text')
            .attr('x', function(d, i){ return getColX(i, 1); })
            .attr('y', PT - 10)
            .attr('text-anchor', 'middle').style('font-size', 15).style('fill', '#000')
            .text(function(d){ return d; });

        // -------------------------------列标准辅助线-------------------------------
        // svg.append('g').selectAll('line').data(ws.map(function(d, i){ return getLeft(i); }))
        //     .enter().append('line')
        //     .attr('x1', function(d){ return d; })
        //     .attr('x2', function(d){ return d; })
        //     .attr('y1', 50)
        //     .attr('y2', 60)
        //     .style('stroke-width', 1).style('stroke', '#00f');

        function getLeft(idx){
            return PL + range(idx).reduce(function (a, b) { return a + W * ws[b]; }, 0);
        }
        function getColX(idx, style){
            if (style===undefined) style = 0;
            var p = [0, 0.5, 1][style];
            return getLeft(idx) + W * ws[idx] * p;
        }

        // 第一列
        var col1 = svg.append('g').selectAll('text').data(data).enter().append('text')
            .attr('y', function(d, i){ return PT + (i + 0.5) * rowH; })
            .attr('x', getColX(colIndex++, 1))
            .attr('text-anchor', 'middle').style('font-size', 14).style('fill', '#777')
            .text(function(d){ return d[1]; });
        // 第二列
        var col2 = svg.append('g').selectAll('text').data(data).enter().append('text')
            .attr('y', function(d, i){ return PT + (i + 0.5) * rowH; })
            .attr('x', getColX(colIndex++, 1))
            .attr('text-anchor', 'middle').style('font-size', 14).style('fill', '#777')
            .text(function(d){ return d[0]; });

        addBar(5, 7, [cols[5], cols[7]], ['#003366', '#006699'], 0);
        colIndex++;
        addBar(6, 8, ['增长率', '增长率'], ['#4cabce', '#e5323e'], 20);
        function addBar(c1, c2, xs, colors, offX){
            // 核心柱子值上限
            var maxV1 = data.reduce(function(a, b){
                var m = parseFloat(b[c1]) > parseFloat(b[c2]) ? b[c1] : b[c2];
                return parseFloat(a) > parseFloat(m) ? a : m;
            }, 0);
            var x = d3.scaleLinear().domain([0, parseFloat(maxV1)]).range([0, W * ws[colIndex] - 100]);
            var barLeft = 100;
            [c1, c2].map(function(n, idx){
                svg.append('g').selectAll('rect').data(data).enter().append('rect')
                    .attr('x', getColX(colIndex, 0) + barLeft)
                    .attr('y', function(d, i){ return PT + rowH * i + (rowH / 2) * idx + 5; })
                    .attr('width', function(d){ return x(parseFloat(d[n])); })
                    .attr('height', rowH / 3)
                    .style('fill', colors[idx])
                ;
                svg.append('g').selectAll('text').data(data).enter().append('text')
                    .attr('x', function(d){
                        var w = x(parseFloat(d[n]));
                        return getColX(colIndex, 0) + barLeft + 3 + (w > 0 ? w : 0);
                    })
                    .attr('y', function(d, i){ return PT + rowH * i + (rowH / 2) * idx + 5 + 12; })
                    .style('fill', colors[idx])
                    .attr('text-anchor', 'left').style('font-size', 12)
                    .text( function(d){ return d[n]; })
                ;
                svg.append('g').selectAll('text').data(data).enter().append('text')
                    .attr('x', getColX(colIndex, 0) + barLeft - offX)
                    .attr('y', function(d, i){ return PT + rowH * i + (rowH / 2) * idx + 5 + 12; })
                    .style('fill', colors[idx])
                    .attr('text-anchor', 'end').style('font-size', 12)
                    .text(xs[idx])
                ;
            });
        }


        //

        cout([W]);

    </script>
</body>
</html>